<template>
  <div id="top-header">

    <!-- <dv-decoration-5 class="header-center-decoration"   dur=5 /> -->
    <div class="center-title" >
        <img src="/5摄像头.png"  style="height:30px;padding-top:5px;padding-left:20px" />
        视频监控管理平台      
    </div>
     
    <div class="user" >
        <Dropdown transfer transfer-class-name="transfer" trigger="click" @on-click="handleClick" >
            <a href="javascript:void(0)">
                <span class="user-name">{{ username }}</span>
                <Icon type="ios-contact" size="30" class="user-icon"></Icon>
            </a>
            <DropdownMenu  slot="list">
                <DropdownItem style="z-index: 9999;" name="modifyPassword">修改密码</DropdownItem>
                <DropdownItem style="z-index: 9999;" name="logout" divided>退出登录</DropdownItem>
            </DropdownMenu>
        </Dropdown>
        
    </div>
  </div>
</template>
<script>
import { Dropdown } from 'view-design';
import "../assets/font/font.css"
export default{
    props: {
        username: {
            type: String,
            default: "admin"
        }
    },
    data() {
        return {};
    },
    methods:{
        handleClick(name){
            if(name === "modifyPassword"){
                console.log(111);
            }else if(name === "logout"){
                localStorage.clear();
                this.$router.push({
                    name:"login"
                })
            }
        }
    }
}
</script>
<style lang="less">

.transfer{
    z-index: 9999 !important;
}
#top-header {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  background-size: 100% 100%;
  .center-title {
    font-size: 30px;
    font-family: myFirstFont;
    //top: 5px;
    //transform: translateX(-50%);
  }
  .user{
      right: 0;
      .user-name{
          position: relative;
          //margin: 5px 5px 0px 5px;
          font-weight: bold;
      }
  }
}
</style>